<!-- 首页 -->
<script setup lang="ts" >
import breadCrumb from '@/components/breadCrumb.vue'
import { StarFilled } from '@element-plus/icons-vue'
import { ref,defineAsyncComponent  } from 'vue';
import { getAllSwiper, getAllCompanyIntroduce } from '@/api/set.js'
import { bus } from '../../utils/mitt';

const introduce = defineAsyncComponent(() =>
    import('./components/introduce.vue')
)
//面包屑
const item = ref({
    first: '首页',
})
//显示哪个图标
const iconName = ref({
    name: 'home'
})
//轮播图
const imageSwiper = ref()

const getAllswiper = async () => {
    const res = await getAllSwiper()
    // console.log(res);
    imageSwiper.value = res
}
getAllswiper()
//公司介绍
const AllCompany = ref([])
const getAllCompany = async () => {
    const res = await getAllCompanyIntroduce()
    // console.log(res); //返回的是个数组
    AllCompany.value = res
}
getAllCompany()
//表格
interface User {
    date: string
    name: string
    address: string
}


const tableData: User[] = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]



const visible = ref()
const openDialog = (index) => {
    bus.emit('introduce', index)
   
    visible.value.open()


}
</script>

<template>
    <breadCrumb :item="item" :iconName="iconName"/>
    <introduce ref="visible"/>
    <div class="home_warpped">
        <!--  -->
        <div class="content_earpped">
            <div class="swiper_warpped">
                <el-carousel :interval="5000" arrow="always" height="390px">
                    <el-carousel-item v-for="(item, index) in imageSwiper" :key="index">
                        <img v-if="item" :src="item" class="imgSize" />
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="layout_warpped">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="(item, index) of AllCompany" :key="index" @click="openDialog(index + 1)">
                        <div class="grid-content ep-bg-purple">
                            <span>{{ item.set_name }}</span>
                            <p class="content1">{{ '---------------*' }}</p>
                            <p class="content2" v-html="item.set_text"></p>
                        </div>

                    </el-col>
                </el-row>

            </div>
            <!-- 星星分割线 -->
            <el-divider style="background-color: rgb(178, 196, 196);">
                <el-icon color="#CD4D38"><star-filled /></el-icon>
                <el-icon color="#66CD38"><star-filled /></el-icon>
                <el-icon color="#74BEEB"><star-filled /></el-icon>
            </el-divider>
            <div class="two_tabled_warpped">
                <div class="company">
                    <span class="company_title">公司告示</span>
                    <el-table :data="tableData" size="large" :border="true" stripe :highlight-current-row="true"
                        :resizable="true">
                        <el-table-column prop="date" label="Date" width="180" />
                        <el-table-column prop="name" label="Name" width="180" />
                        <el-table-column prop="address" label="Address" />
                    </el-table>
                </div>
                <el-divider style="background-color: rgb(178, 196, 196); height: 50vh;" direction="vertical"
                    border-style="dashed">
                    <el-icon color="#CD4D38"><star-filled /></el-icon>
                </el-divider>
                <div class="system">
                    <span class="system_title">系统消息</span>
                    <el-table :data="tableData" :fit="false" :highlight-current-row="true">
                        <el-table-column prop="date" label="Date" width="180" />
                        <el-table-column prop="name" label="Name" width="180" />
                        <el-table-column prop="address" label="Address" />
                    </el-table>
                </div>

            </div>
        </div>

    </div>
</template>

<style scoped lang="scss">
.home_warpped {
    background: linear-gradient(45deg, #8E7E9E 25%, #2980b9 75%);
    height: calc(100vh - 85px);
    padding: 8px;


    .content_earpped {
        padding: 0 20px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        

        .swiper_warpped {
            .el-carousel {
                margin-top: 10px;

                .el-carousel__item h3 {
                    color: #9d551e;
                    opacity: 0.75;
                    line-height: 300px;
                    margin: 0;
                    text-align: center;
                }

                .el-carousel__item:nth-child(2n) {
                    background-color: #99a9bf;
                }

                .el-carousel__item:nth-child(2n + 1) {
                    background-color: #d3dce6;
                }

            }

            //轮播默认
            .imgSize {
                width: 100%;
                height: 100%;

            }
        }

        .layout_warpped {
            display: flex;
            flex-direction: row;
            // box-sizing: border-box;
            width: 100%;
            height: 200px;
            margin-left: 12px;
            margin-bottom: 5px;

            .el-row {
                margin-top: 10px;
                width: 100%;
                height: 100%;

                //   box-sizing: border-box;
                .el-col {
                    border-radius: 8px;
                }

                .grid-content {
                    border-radius: 4px;
                    min-height: 36px;
                    padding: 5px 0px;

                    span {
                        border-bottom: 4px solid #2980b9;
                        margin-left: 20px;
                    }

                    .content1 {
                        margin-top: 18px;
                        margin-left: 100px;
                        color: #9d551e;



                    }

                    .content2 {
                        font-size: 16px;
                        font-family: 'Courier New', Courier, monospace;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 9; //显示几行
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        text-indent: 2em; //缩进两个字符
                    }

                }

                .ep-bg-purple {
                    background-color: #ded7e5;
                    width: 100%;
                    height: 100%;
                }

                .ep-bg-purple:hover {
                    background-color: #dbcfe8;
                    cursor: pointer;
                    box-shadow: 0px 0px 20px #8E7E9E;
                }

                .ep-bg-purple-light {
                    background-color: #cfd0d4;
                    width: 100%;
                    height: 100%;
                }

                .ep-bg-purple-light:hover {
                    background-color: #c2c6d7;
                    cursor: pointer;
                    box-shadow: 0px 0px 20px #adb3d1;
                }
            }
        }

        .two_tabled_warpped {
            margin-top: 10px;
            display: flex;

            .company {
                flex: 1;
                margin-right: 5px;


                .company_title {
                    font-weight: 600;
                    color: #e07832;
                    margin-bottom: 20px;
                }
            }

            .system {
                flex: 1;
                margin-left: 25px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                .system_title {
                    font-weight: 600;
                    color: #4c4845;
                }
            }
        }
    }

}
</style>
<style>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>